<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/zui/1.10.0/css/zui.min.css">

<!-- ZUI Javascript 依赖 jQuery -->
<script src="//cdn.bootcdn.net/ajax/libs/zui/1.10.0/lib/jquery/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="//cdn.bootcdn.net/ajax/libs/zui/1.10.0/js/zui.min.js"></script>
</head>
<body>
 <main style="width: 300px; margin:10px auto">
    <div class="input-control has-icon-left">
        <input id="inputAccountExample1" type="text" class="form-control" placeholder="用户名">
        <label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
      </div>
      <div class="input-control has-icon-left has-icon-right">
        <input id="inputEmailExample1" type="email" class="form-control" placeholder="Email">
        <label for="inputEmailExample1" class="input-control-icon-left"><i class="icon icon-envelope "></i></label>
        <label for="inputEmailExample1" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <br>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
        </div>
      </div>
      <br>
      <div class="dropdown">
        <button class="btn" type="button" data-toggle="dropdown">菜单按钮 <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="###">操作</a></li>
          <li><a href="###">另一个操作</a></li>
          <li><a href="###">更多操作</a></li>
        </ul>
      </div>

      <br>
      <button class="btn btn-primary" type="button">提示消息</button>
 </main>
      
</body>
<script>
    // 点击按钮时显示漂浮消息
$('.btn').on('click', function() {
    new $.zui.Messager('这是一个浮动消息。', {
        icon: 'bell' // 定义消息图标
    }).show();
});

</script>
</html>